<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <p>{{count}}</p>
        <p>{{doubleCount}}</p>
        <p>
            <button @click="addCount">count++</button>
        </p>
    </div>
</body>
<script>
    // Vue2的语法中 Vue是构造函数, new Vue() 创建实例 (应用)
    // new Vue({
    //     el:"#app",
    //     data:{
    //         count:10,
    //     }
    // }); 

    // 本地引入  Vue  -> 全局对象(各种方法 -> 后期要用)

    // Vue3中   全局对象(存放各种方法 -> 后期要用)
    console.log(Vue);  

    let {createApp} = Vue;   

    // createApp(options)  => 根据传入options对象 创建一个Vue实例(应用  -> 每个应用都是一个组件)
    // 1. options选项中没有el参数了, 挂载实例(应用) 需要用实例的mount()方法
    // 2. createApp() 创建一个每一个应用都是一个组件 => data写成函数版 
    // 3. Vue实例(应用)中data methods computed 不会再挂载到实例本身, 而是存放到一个公共的代理对象(this->代理对象), 通过代理对象访问和修改数据
    // 4. 定义组件  混合  指令  依赖 => 通过app(来定义) -> 一般给根实例 => 定义就的就是全局的

    var app = createApp({
        // el:"#app",   // vue3中没有此选项
        data(){
            return {
                count:10,
            }
        },
        methods: {
            addCount:function(){
                this.count++
            }
        },
        computed:{
            doubleCount:function(){
                return this.count * 2;
            }
        },
        watch:{
            count:function(newVal,oldVal){
                console.log("count发生了改变",newVal,oldVal);
            }
        },
        mounted() {
            console.log("this",this);  
        },
    })

    console.log(app);

    app.mount("#app");








</script>
</html>